<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<title>积分商城</title>
	<link type="text/css" href="css/reset.css" rel="stylesheet" />
	<link type="text/css" rel="stylesheet" href="css/all.css" />
	<link type="text/css" rel="stylesheet" href="../js/swiper/swiper.min.css" />
	<!-- <link rel="stylesheet" href="../css/base.css"> -->
	<script src="js/flexible.min.js"></script>
	<script src="js/jquery.1.11.3.min.js"></script>
	<script src="../js/common.js"></script>
	<script src="js/main.js"></script>
	<script src="../js/vue.js"></script>
	<script src="../js/vue-resource.min.js"></script>
	<script src="../js/swiper/swiper.min.js"></script>
	<style>
		.foot {
				width: 100%;
				height: 1.4rem;
				overflow: hidden;
				background-color: #ffffff;
				border-top: 1px solid #000000;
				position: fixed;
				bottom: 0;
				display: flex;
			}
			.foot-item {
				width: 25%;
				margin-top: .19rem;
			}
			.f-i-i {
				width: .685rem;
				height: .685rem;
				margin: 0 auto;
			}

			.foot-item p {
				color: #8e8e93;
				font-size: .285rem;
				text-align: center;
				margin-top: .02rem;
			}
			.isactive {
				color: #e56969 !important;
				border-color: #e56969 !important;
			}
			.foot1 {
				background: url("../img/foot1.png") no-repeat;
				background-size: 100%;
			}
			.foot11 {
				background: url("../img/foot11.png");
				background-size: 100%;
			}
			.foot2 {
				background: url("../img/foot2.png");
				background-size: 100%;
			}
			.foot22 {
				background: url("../img/foot22.png");
				background-size: 100%;
			}
			.foot3 {
				background: url("../img/foot3.png");
				background-size: 100%;
			}
			.foot33 {
				background: url("../img/foot33.png");
				background-size: 100%;
			}
			.foot4 {
				background: url("../img/foot4.png");
				background-size: 100%;
			}
			.foot44 {
				background: url("../img/foot44.png");
				background-size: 100%;
			}
		.foot-item p{
			font-size: 0.27rem;
		}
		.fjsj_detail{
			overflow: hidden;text-overflow: ellipsis; white-space: nowrap; margin:0.1rem auto;width: 100%; margin-right: 0.2rem;
		}
		.incase1_sc_li_con img{
			width: 2rem;
			height: 2rem;
		}
		.cont {
			margin-top: .15rem;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-bottom: .2rem;
		}
		.c-item {
			width: 49%;
			background-color: #ffffff;
			overflow: hidden;
			margin-top: .05rem;
		}
		.shopcarImg1 {
			display: block;
			width: 4.65rem;
			height: 4.36rem;
			margin: 0 auto;
			margin-top: .11rem;
		}
		.c-i-p {
			width: 3.635rem;
			color: #333333;
			font-size: .34rem;
			margin-left: .14rem;
			margin-top: .2rem;
		}
		.c-i-p-moeny {
			font-size: .4rem;
			color: #ef0b21;
			margin-left: .14rem;
			margin-top: .08rem;
		}
		.more-p {
			text-align: center;
			color: #999999;
			font-size: .12rem;
			margin-top: .15rem;
			margin-bottom: .15rem;
		}
		.swiper2 {
			width: 100%;
			height: 5rem;
		}
		.swiper-wrapper {
			width: 100%;
			height: 100%;
		}
		.swiper-slide {
			width: 100%;
			height: 100%;
		}
		.swiper-slide img {
			width: 100%;
			height: 100%;
		}
	</style>
</head>

<body>
<div id="app">
	<div class="swiper-container swiper2">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<img src="../img/swiper1.jpg" alt="">
			</div>
			<div class="swiper-slide">
				<img src="../img/swiper2.jpg" alt="">
			</div>
			<div class="swiper-slide">
				<img src="../img/swiper3.jpg" alt="">
			</div>
		</div>
	</div>
	<nav class="sc_father">
		<div class="line"></div>
		<div class="cont">
			<div class="c-item" v-for="item in retailGoodsList" :data-id="item.goodsId" @click="goodsInfo">
				<img :src="item.goodsImg" class="shopcarImg1"  alt="">
				<p class="c-i-p">{{item.goodsName}}</p>
				<p class="c-i-p-moeny">￥{{item.shopPrice}}</p>
			</div>
		</div>
	</nav>
	<div class="foot" style="height: 1.3rem; font-size: 0.1rem">
		<div class="foot-item" onclick="location.href='../tmp/index/index.html'">
			<div class="f-i-i foot1"></div>
			<p>首页</p>
		</div>
		<div class="foot-item" onclick="location.href='index.html'">
			<div class="f-i-i foot2 foot22"></div>
			<p class="isactive">积分商城</p>
		</div>
		<div class="foot-item" onclick="location.href='../tmp/shopcar/indexShop.html'">
			<div class="f-i-i foot3"></div>
			<p>购物车</p>
		</div>
		<div class="foot-item" onclick="location.href='../tmp/personal/index.html'">
			<div class="f-i-i foot4"></div>
			<p>我的</p>
		</div>
	</div>
</div>
	<!-------------------------------描述：头部---------------------------------->

</body>
<script>

    var app = new Vue({
        el:"#app",
        data:{
            listImg:[],
            retailGoodsList:[]
        },
        mounted() {
            this.$http.post(SURL + '/jfd/shopGoods/list').then(function(res) {
				this.retailGoodsList = res.body.list.reverse();
                console.log(this.retailGoodsList );
                this.listImg = res.body.listImg;
            })


        },
        methods: {
            goodsInfo(event){
                var _th = event.target
                let id = ''
                if(!$(_th).parents(".c-item").data("id")){
                    id = $(_th).data("id")
                }else{
                    id = $(_th).parents(".c-item").data("id")
                }
                console.log(id)
                location.href = '../tmp/detail/shop-shangjia-detail.html?id=' + id
            }
        },
    })
    var mySwiper = new Swiper('.swiper2',{
        autoplay: 3000,
		autoplayStopOnLast: true
    })
</script>

</html>



<!--<script type="text/javascript">-->
	<!--$(window).scroll(function () {-->
		<!--if ($(window).scrollTop() > $(".sc_tab").offset().top) {-->
			<!--$(".sc_tab_tit").slideDown();-->
			<!--$(".sc_tab_tit").css({-->
				<!--"position": "fixed",-->
				<!--"z-index": "99",-->
				<!--"top": "2rem",-->
			<!--});-->
			<!--$(".sc_tab_con").css({-->
				<!--"padding-top": "0.8rem",-->
			<!--});-->
			<!--$('.sec').show();-->
		<!--} else {-->
			<!--$(".sc_tab_tit").css({-->
				<!--"position": "inherit",-->
			<!--});-->
			<!--$(".sc_tab_con").css({-->
				<!--"padding-top": "0",-->
			<!--});-->
			<!--$('.sec').hide();-->
		<!--}-->
	<!--});-->


	<!--$('.sc_tab_tit_c').click(function () {-->
		<!--var caseId = $(this).attr('id');-->
		<!--$('.sc_tab_tit_p').removeClass('sc_tab_tit_p_cur');-->
		<!--$(this).children('.sc_tab_tit_p').addClass('sc_tab_tit_p_cur');-->
	<!--});-->
	<!--/***************************获取高度*****************************/-->
	<!--$(".sc_tab_tit").click(function () {-->

		<!--$("html,body").animate({-->
			<!--scrollTop: $(".scroll").offset().top-->
		<!--}, 300);-->


	<!--})-->
	<!--/***************************综合排序弹出框切换颜色****************************/-->

	<!--$(".zhpx_alert > li").click(function () {-->

		<!--$(this).addClass('color_red').siblings('li').removeClass('color_red');-->

	<!--});-->


	<!--/***************************筛选弹出框****************************/-->

	<!--$('#case4_sc').click(function () {-->
		<!--$('.zhpx_alert').hide();-->
		<!--$('.sx_alert').fadeTo(400, 1);-->

	<!--});-->



	<!--$('.sx_wc').click(function () {-->

		<!--$('.sx_alert').hide();-->

	<!--});-->

	<!--$(".sx_alert_con > p").click(function () {-->

		<!--if ($(this).is('.sx_color')) {-->
			<!--$(this).removeClass('sx_color');-->
		<!--} else {-->
			<!--$(this).addClass('sx_color');-->
		<!--}-->


	<!--});-->

	<!--$(".sx_qcsx").click(function () {-->

		<!--$(".sx_alert_con > p").removeClass('sx_color');-->

	<!--});-->

	<!--$('.sx_alert_hide').click(function () {-->

		<!--$('.sx_alert').hide();-->

	<!--});-->

	<!--$('#case2_sc').click(function () {-->

		<!--$('.sx_alert').hide();-->
		<!--$('.zhpx_alert').hide();-->

	<!--});-->
	<!--$('#case3_sc').click(function () {-->

		<!--$('.sx_alert').hide();-->
		<!--$('.zhpx_alert').hide();-->

	<!--});-->
<!--</script>-->
